<template>
    <svg class="number" version="1.1" viewBox="0 0 29.866 29.866">
        <polygon :class="numMap[num][0] ? 'full' : 'empty'"
            points="20.273,16.527 20.273,19.392 22.387,21.507 22.387,15.997 21.594,15.207 " id="polygon434"
            transform="matrix(2.0699051,0,0,2.0950065,-21.417185,-16.030146)" />
        <polygon :class="numMap[num][1] ? 'full' : 'empty'"
            points="21.999,21.922 19.887,19.809 15.905,19.809 13.791,21.922 " id="polygon438"
            transform="matrix(2.0699051,0,0,2.0950065,-21.417185,-16.030146)" />
        <polygon :class="numMap[num][2] ? 'full' : 'empty'" points="21.999,7.7 13.792,7.7 15.906,9.81 19.887,9.81 "
            id="polygon440" transform="matrix(2.0699051,0,0,2.0950065,-21.417185,-16.030146)" />
        <polygon :class="numMap[num][3] ? 'full' : 'empty'"
            points="13.385,8.097 13.385,13.579 14.175,14.387 15.496,13.045 15.496,10.182 " id="polygon442"
            transform="matrix(2.0699051,0,0,2.0950065,-21.343829,-15.733165)" />
        <polygon :class="numMap[num][4] ? 'full' : 'empty'"
            points="15.64,15.867 20.151,15.867 21.209,14.809 20.151,13.755 15.64,13.755 14.582,14.809 " id="polygon444"
            transform="matrix(2.0699051,0,0,2.0950065,-21.417185,-16.030146)" />
        <polygon :class="numMap[num][5] ? 'full' : 'empty'"
            points="15.496,10.182 13.385,8.097 13.385,13.579 14.175,14.387 15.496,13.045 " id="polygon442-6"
            transform="matrix(-2.0699051,0,0,2.0950065,52.062604,-15.901976)" />
        <polygon :class="numMap[num][6] ? 'full' : 'empty'"
            points="20.273,16.527 20.273,19.392 22.387,21.507 22.387,15.997 21.594,15.207 " id="polygon434-0"
            transform="matrix(-2.0699051,0,0,2.0950065,52.539413,-16.136157)" />
    </svg>
</template>
<script lang="ts" setup>
type NumStr = "0" | "1" | "2" | "3" | "4" | '5' | '6' | '7' | '8' | '9'
defineProps<{ num: NumStr|string }>()
type NumMap = {
    [key in NumStr|string]: number[];
};
const numMap: NumMap = {
    0: [1, 1, 1, 1, 0, 1,1, 1],
    1: [1, 0, 0, 0, 0, 1, 0, 1],
    2: [0, 1, 1, 0, 1, 1, 1, 1],
    3: [1, 1, 1, 0, 1, 1, 0, 1],
    4: [1, 0, 0, 1, 1, 1, 0, 1],
    5: [1, 1, 1, 1, 1, 0, 0, 1],
    6: [1, 1, 1, 1, 1, 0, 1, 1],
    7: [1, 0, 1, 0, 0, 1, 0, 1],
    8: [1, 1, 1, 1, 1, 1, 1, 1],
    9: [1, 1, 1, 1, 1, 1, 0, 1],
}
</script>
<style lang="less" scoped>
.number {
    height: 1em;
}

.empty {
    fill: #ececec;
}

.full {
    fill: #010002
}
</style>